import "./App.css";
import React, { useState, useMemo, useCallback } from "react";

function Header() {
  const [name, updateName] = useState("hjq");
  const HeaderTitle = useMemo(() => {
    return name + "hjq";
  }, [name]);
  const changeHeaderTitle = useCallback(() => {
    updateName("黄军泉");
  }, []);
  return <div onClick={changeHeaderTitle}>{HeaderTitle}</div>;
}

function Body({ content, label }) {
  return (
    <div>
      <div>我是body</div>
      <div>{content}</div>
      <div>{label}</div>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Header></Header>
      <Body content="我是content" label="我是label"></Body>
    </div>
  );
}

export default App;
